<template>

	<div id="peopledetail">
    <van-nav-bar
      title="添加人才"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="main">
      <van-cell-group>
        <van-field
          v-model="resume.name"
          required
          clearable
          label="姓名"
          icon="question"
          placeholder="请输入姓名"
          @click-icon="$toast('请输入姓名')"
        />
        <van-field
          v-model="resume.phone"
          required
          clearable
          label="手机号"
          icon="phone"
          placeholder="请输入手机号"
          @click-icon="$toast('请输入手机号')"
          ref="phone"
        />
        <van-field
          ref="email"
          v-model="resume.email"
          required
          clearable
          label="电子邮件"
          icon="mail"
          placeholder="请输入电子邮件"
          @click-icon="$toast('请输入电子邮件')"
        />
        <van-radio-group v-model="resume.gender">
          <van-cell title="男" clickable @click="resume.gender = 'male'">
            <van-radio name="male" />
          </van-cell>
          <van-cell title="女" clickable @click="resume.gender = 'female'">
            <van-radio name="female" />
          </van-cell>
        </van-radio-group>
        <van-cell title="期望职位" :value="resume.position" v-on:click="positionsshow = !positionsshow">
          
        </van-cell>
        <van-cell title="擅长行业" :value="resume.area" v-on:click="areashow = !areashow">
          
        </van-cell>
      </van-cell-group>
    </div>
    <van-button style="position:fixed;bottom:0px;background:#38f;color:white" size="large" v-on:click="submit">提交</van-button>
    <van-popup v-model="positionsshow" position="bottom">
      <van-picker :columns="positions" @change="onPositionChange" />
    </van-popup>
    <van-popup v-model="areashow" position="bottom">
      <van-picker :columns="areas" @change="onAreaChange" />
    </van-popup>
	</div>

</template>
<script scopped>
import Config from './project.config'
import Avatar from 'vue-avatar/src/Avatar'
export default {
  components: {
    Avatar
  },
  data() {
    return {
      areashow:false,
      positionsshow:false,
      resume:{
        name: '',
        phone: '',
        email: '',
        gender: '',
        area: '未填写',
        position: '未填写',
        avatar: 'none'
      },
      areas: ['地产商业', '制造业', '消费及健康', '金融业', '高科技互联网','综合集团'],
      positions: ['财务金融','生产制造','营销市场','人力管理','高层管理'],
      // keys:{0:'name',1:'phone',2:'email',3:'gender',4:'area',5:'position'}
      rules:[{
        type:'phone',
        reg:'^[1][3,4,5,7,8][0-9]{9}$',
        message:'手机号填写不正确!'
      },
      {
        type:'email',
        reg:'([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$',
        message:'电子邮件不正确！'
      }
      ]
    };
  },
  methods: {
    validateForm(){
      var that = this;
      Object.keys(this.resume).forEach(function(item) {
        if(that.resume[item] == '' || that.resume[item] == '未填写'){
          that.$toast('请完成表单内容')
        }
      });

      for(let value of that.rules){
        console.log(value.reg,that.resume[value.type]);
        var res;
        console.log(

          res = new RegExp(value.reg).test(that.resume[value.type])
        );
        
        if(res == false){
          that.$refs[value.type].errorMessage = value.message;
          return false;
        }
      }
      return true
    },
    onClickLeft: function() {
      this.$router.go(-1);
    },
    onPositionChange: function(picker, value, index) {
      this.resume.position = value;
    },
    onAreaChange: function(picker, value, index){
      this.resume.area = value;
      
    },
    submit: function(){
      if(!this.validateForm())return
      // console.log(this.resume);
      
      this.$http.post(Config.baseUrl+'/api/resume/add',
        this.resume
      ).then(function(response){
        if(response.data.code == 1){
          this.$router.go(-1);
        }
      },function(error) {
        // console.log(error)
      })
    }
  },
  mounted() {
    this.$store.commit("hideTab");
    console.log("====================================");
    console.log(this.$route.query.id);
    console.log("====================================");
    // this.$http.get(Config.baseUrl+'/api/resume/'+this.$route.query.id).then(function(response){
    //   if(response.data.code == 1){
    //     this.peopleDetail = response.data.data
    //   }
    // },function(error) {
    //   console.log(error)
    // })
  }
};
</script>
<style lang="stylus" scoped>

</style>

